<template>
  <!-- 日榜 周榜 月榜 +日期   -->
  <div id="popup">
    <div class="bgbox">
      <van-dropdown-menu active-color="#1779ff" v-if="show == 'month'">
        <van-dropdown-item ref="rankTypeEl" :title="active">
          <van-cell>
            <template>
              <button
                :class="[active == '日榜' ? 'active' : '']"
                class="num"
                @click="rankTypeFn('日榜')"
              >
                日榜
              </button>
              <button
                class="num"
                :class="[active == '周榜' ? 'active' : '']"
                @click="rankTypeFn('周榜')"
              >
                周榜
              </button>
              <button
                class="num"
                :class="[active == '月榜' ? 'active' : '']"
                @click="rankTypeFn('月榜')"
              >
                月榜
              </button>
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!-- 时间 -->
      <van-dropdown-menu class="select" active-color="#1779ff">
        <van-dropdown-item
          v-model="value"
          :options="formatwdate"
          @change="dropdownChangeFn"
        />
      </van-dropdown-menu>
      <slot></slot>
    </div>
    <!-- <div></div> -->
  </div>
  <!-- </div> -->
</template>

<script>
export default {
  props: ["show","timeData"],
  data() {
    return {
      time: [false, false, false],
      formatwdate: [], //日期
      value: "",
      total: "总量",
      active: "日榜", //判断选中哪个日榜、周、月
      newvalue: [],
      endDate: null,
    };
  },
  computed: {},
  created() {
    this.changeRank(1);
  },
  mounted() {
    // this.day();
  },
  watch: {
    // active(nVal){
    //   this.changeRank();
    //   this.$refs.rankTypeEl.toggle(); //关闭弹窗
    // },
  },
  methods: {
    dropdownChangeFn(){
      this.changeRank();
    },
    rankTypeFn(rankName){
      this.active = rankName;
      this.changeRank(1);
      this.$refs.rankTypeEl.toggle(); //关闭弹窗
    },
    changeRank(isRankChecked){  //isRankChecked是否需要重新初始化当前选中日期的值
      this.formatwdate = [];
      let that = this;
      let dayDataA = '';
      let dayDataB = '';
      let dayDataC = '';
      if(this.active == '日榜'){
        dayDataA = this.timeData[0];  //原始时间戳集合 单位：秒
        dayDataB = dayDataA.map((item)=>{ //接口用的日期
          return that.formatDateNew(item.startTime*1000, 'YY-MM-DD');
        });
        dayDataC = dayDataA.map((item)=>{  //展示用的日期
          return that.timestamp(item.startTime, 'M月D日');
        });
      }else if(this.active == '周榜'){
        dayDataA = this.timeData[1];  //原始时间戳集合 单位：秒
        dayDataB = dayDataA.map((item)=>{ //接口用的日期
          return that.formatDateNew(item.startTime*1000, 'YY-MM-DD')+'-'+that.formatDateNew(item.endTime*1000, 'YY-MM-DD');
        });
        dayDataC = dayDataA.map((item)=>{  //展示用的日期
          return that.timestamp(item.startTime, 'M月D日')+'-'+that.timestamp(item.endTime, 'M月D日');
        });
      }else{
        dayDataA = this.timeData[2];  //原始时间戳集合 单位：秒
        dayDataB = dayDataA.map((item)=>{ //接口用的日期
          return that.formatDateNew(item.startTime*1000, 'YY-MM-DD')+'-'+that.formatDateNew(item.endTime*1000, 'YY-MM-DD');
        });
        dayDataC = dayDataA.map((item)=>{  //展示用的日期
          return that.timestamp(item.endTime, 'Y年M月');
        });
      }
      if(isRankChecked){  //每次切换日周月榜都重置默认选中值为对应的第一个值
        this.value = dayDataC[0];
      }
      for(let i=0;i<dayDataC.length;i++){
        this.formatwdate.push({text:dayDataC[i],value:dayDataC[i]});
      }
      this.$emit("formatwdate", this.active, dayDataB[dayDataC.indexOf(this.value)]);
    },
    // //数据传给父组件
    // emit() {
    //   this.$emit("formatwdate", this.title, this.value);
    // },
    // emit1(i) {
    //   if (this.title == "月榜") {
    //     let time1 = this.newvalue.filter((item) => {
    //       return item.substring(0, 7) == this.value ? item : "";
    //     });
    //     this.$emit("formatwdate1", this.value, ...time1);
    //   } else {
    //     this.$emit("formatwdate1", this.value);
    //   }
    // },
  },
  components: {},
};
</script>

<style scoped lang="less">
.active {
  background: #fd7f2c !important;
  color: #fff !important;
}
#popup {
  width: 100%;
  height: 1.0667rem;
  border-top: 1px solid #e5e5e5;
  margin-bottom: .2rem;
  // background: #f1f1f1;
  > .bgbox {
    width: 100%;
    height: 1.0667rem;
    display: flex;
    align-items: center;
    background: #fff;
    justify-content: space-around;
  }
  .num {
    // padding: .266667rem .386667rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-right: 0.266667rem;
    margin-bottom: 0.266667rem !important;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    background: #f1f1f1;
    color: #666666;
    line-height: 0.853333rem;
  }
  .num:hover {
    color: #fff;
    background: #fd7f2c;
  }
  .select1 {
    font-size: 0.373333rem;
    color: #fff !important;
    background-color: #fd7f2c !important;
    border: 1px solid #fd7f2c;
  }
  .select {
    flex: 2.3;
    width: 13.333333rem;
  }
}
</style>
